<template>
  <el-transfer
    v-model="yesData"
    :props="{key: 'id',label: 'name'}"
    :titles="['未关联', '已关联']"
    @change="handleChange"
    :data="noData"
  ></el-transfer>

</template>

<script>
import {getRolesByUserId} from '@/api/users'

export default {
  name: "transfer",
  props: {
    userId:{
      type:Number,
      default:''
    }
  },
  data () {
    return {
      noData: [{
        id: 1,
        name: '测试1'
      }, {
        id: 2,
        name: '测试2'
      }, {
        id: 3,
        name: '测试3'
      }],
      yesData: [1, 3]
      // 注意:key 的字符类型要一致!!!
    }
  },
  methods: {
    handleChange (value, direction, movedKeys) {
      console.log(value, direction, movedKeys);
      //可以通过direction回调right/left 来进行操作，right：把数字移到右边，left把数据移到左边
      if (direction === "right") {

      }
      if (direction === "left") {

      }

    }
  },
  created () {
    console.log(this.userId)
    getRolesByUserId(this.userId).then(res => {
      console.log("22222222222222")
      console.log(res)
    },error => {
      console.log("22222222222222")
      console.log(error)
    })
  }
}
</script>

<style scoped>
.transfer-footer {
  margin-left: 20px;
  padding: 6px 5px;
}
</style>
